<template>
    <div>
        <slot></slot>
    </div>
</template>

<script type="text/javascript">
export default {
    props: {
        dblSpacing: {
            type: Number,
            default: 300
        },
        pressHoldTime: {
            type: Number,
            default: 500
        },
        moveMinWait: {
            type: Number,
            default: -1
        },
        auto: {
            type: Boolean,
            default: true
        },
        
    },
    data() {
        return {
            latestTrigger: {
                type: null,
                e: null,
            },
            e: null,
            startE: null,
            timer: null,
            listeners: {
                mousedown(e) {
                    var vm = this;
                    if ( e.button != 0) {
                        return;
                    }
                    e.preventDefault();
                    vm.startE = e;
                    if (vm.auto && vm.pressHoldTime >= 0) {
                        vm.timer = setTimeout(() => {
                            vm.triggerPress({
                                timeStamp: Date.now()
                            });
                            vm.initListen();
                        }, vm.pressHoldTime);
                    }
                },
                mousemove(e) {
                    var vm = this;
                    if ( e.button != 0 || !vm.startE || vm.moveMinWait < 0) {
                        return;
                    }
                    e.preventDefault();
                    if (!vm.latestTrigger.e
                    || (e.timeStamp - vm.latestTrigger.e.timeStamp) >= vm.moveMinWait) {
                        vm.triggerMove(e);
                    }
                },
                mouseup(e) {
                    var vm = this;
                    if ( e.button != 0 || !vm.startE) {
                        return;
                    }
                    e.preventDefault();
                    if (vm.pressHoldTime >= 0 && e.timeStamp - vm.startE.timeStamp >= vm.pressHoldTime) {
                        vm.triggerPress(e);
                    } else {
                        vm.triggerClick(e);
                    }
                    vm.initListen();
                },
                mouseleave(e) {
                    var vm = this;
                    if ( e.button != 0 || !vm.startE ) {
                        return;
                    }
                    e.preventDefault();
                    vm.initListen();
                }
            }
        }
    },
    methods: {
        enventEmit(name) {
            var args = [].slice.call(arguments, 1);
            var upName = name.replace(/\-(.)/g, function(a, x) {
                return x.toUpperCase();
            }), handler = this[name] || this[upName];
            handler && handler.apply(this, args);
            this.$emit.apply(this, [name, this.e, ...args]);
        },
        initListen() {
            clearTimeout(this.timer);
            this.timer = null;
            this.startE = null;
            this.e = null;
        },
        triggerClick(e) {
            var vm = this;
            if (!vm.startE) {
                return;
            }
            vm.e = e;
            vm.enventEmit('smart-click');
            // vm.latestTrigger.e && console.log(e.timeStamp, vm.latestTrigger.e.timeStamp)
            if (vm.latestTrigger.type == 'click'
                && e.timeStamp - vm.latestTrigger.e.timeStamp <= vm.dblSpacing) {
                vm.enventEmit('smart-dbl-click');
                vm.latestTrigger.type = 'dbl-click';
                vm.latestTrigger.e = e;
            } else {
                vm.latestTrigger.type = 'click';
                vm.latestTrigger.e = e;    
            }
        },
        triggerPress(e) {
            var vm = this;
            if (!vm.startE) {
                return;
            }
            vm.e = e;
            vm.enventEmit('smart-mouse-press');
            vm.latestTrigger.type = 'mouse-press';
            vm.latestTrigger.e = e;
        },
        triggerMove(e) {
            var vm = this;
            if (!vm.startE) {
                return;
            }
            var area = {
                xMove: e.clientX - vm.startE.clientX,
                yMove: e.clientY - vm.startE.clientY
            };
            vm.e = e;
            vm.enventEmit('smart-mouse-move', area);
            vm.latestTrigger.type = 'mouse-move';
            vm.latestTrigger.e = e;
        }
    },
    created() {
        var vm = this;
        var listeners = vm.listeners;
        for (var i in listeners) {
            listeners[i] = listeners[i].bind(vm);
        }
    },
    mounted() {
        var vm = this;
        var listeners = vm.listeners;
        for (var i in listeners) {
            vm.$el.addEventListener(i, listeners[i])
        }
    },
    destroyed() {
        var vm = this;
        var listeners = vm.listeners;
        for (var i in listeners) {
            vm.$el.removeEventListener(i, listeners[i])
        }
    }
}
</script>